<template>
<div>
  <div class="" style="margin-top:200px">
    姓名：{{name}}，年龄：{{age}} <br>
    <input type="text" name="" value="" placeholder="请输入年龄" v-model="newAge">
    <input type="button" name="" value="更改年龄" @click="fn">
  </div>
  <br>
  <br>
  <br>
  <br>
  <div class="">
    <p v-html="htmlText"></p>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return { newAge: '', htmlText: '<h2>这是一个标题元素</h2>' }
  },
  methods: {
    fn () {
      this.$store.dispatch('setAge', this.newAge)
    }
  },
  filters: {
    aaa (num) {
      return num + 5
    }
  },
  computed: {
    name () {
      return this.$store.state.user.name
    },
    age () {
      return this.$store.state.user.age
    }
  }
}
</script>

<style>
li {
  text-align: left;
  overflow: visible;
}
</style>
